<template>
  <v-form-designer
    ref="vfDesignerRef"
    :field-list-api="fieldListApi"
    :banned-widgets="testBanned"
    :designer-config="designerConfig"
  >
    <template #customToolButtons>
      <el-button type="primary" @click="saveFormJson">保存</el-button>
    </template>
  </v-form-designer>

  <!-- 自定义按钮插槽演示 -->
  <el-dialog v-model="dialogVisible" title="元数据信息" width="50%" align-center>
    <el-form :model="metaForm" :label-position="'right'">
      <el-form-item label="元数据名称" :label-width="formLabelWidth" required>
        <el-input v-model="metaForm.metaName" autocomplete="off" maxlength="15" minlength="2" />
      </el-form-item>
      <el-form-item label="元数据标识" :label-width="formLabelWidth" required>
        <el-input
          v-model="metaForm.metaCode"
          autocomplete="off"
          maxlength="15"
          minlength="3"
          :disabled="updated"
        />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="metaForm.remark" autocomplete="off" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="saveMeta">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import request from '@/config/axios'
import { useRoute } from 'vue-router'
import * as MetaApi from '@/api/meta/index'
const exp = reactive({
  pathUrl: import.meta.env.VITE_BASE_URL
})
export default {
  name: 'VForm',
  data() {
    return {
      fieldListApi: {
        //URL: '/admin-api/meta/vform/listField?id=' + useRoute().query.id,
        URL: exp.pathUrl+'/admin-api/meta/vform/listField?id=' + useRoute().query.id,
        labelKey: 'fieldLabel',
        nameKey: 'fieldName',
        headers: {
          Authorization: 'Bearer 18fd6de4cf2f4d7bb3467fddad2vform'
        }
      },
      updated: false,
      testBanned: ['sub-form', 'alert'],
      dialogVisible: false,
      formLabelWidth: '120px',
      designerConfig: {
        languageMenu: false,
        externalLink: false,
        formTemplates: true,
        eventCollapse: true,
        importJsonButton: false,
        exportJsonButton: false,
        exportCodeButton: false,
        generateSFCButton: false
      },
      metaForm: {
        id: null,
        metaName: '',
        metaCode: '',
        formJson: '',
        remark: ''
      }
    }
  },
  computed: {
    //
  },
  created() {
    const route = useRoute()
    const id = route.query.id
    if (id) {
      this.metaForm.id = id
      const metaData = MetaApi.getMetaOne(id).then((res) => {
        this.$refs.vfDesignerRef.setFormJson(res.tableForm)
        this.metaForm.metaCode = res.metaCode
        this.metaForm.metaName = res.metaName
        this.metaForm.remark = res.remark
        this.updated = true
      })
    }
  },
  methods: {
    //保存元数据
    saveMeta() {
      this.dialogVisible = false
      //表单JSON
      let formJson = this.$refs.vfDesignerRef.getFormJson()
      this.metaForm.formJson = formJson
      let url = '/meta/create'
      if (this.updated) {
        url = '/meta/update'
      }
      request
        .post({ url: url, data: this.metaForm })
        .then((res) => {
          console.log(res)
          this.$message.success('保存成功！')
        })
        .catch((error) => {
          this.$message.error('保存失败！')
        })
    },
    doTest() {
      let fieldList = this.$refs.vfDesignerRef.getFieldWidgets(null, true)
      console.log('test', fieldList)
    },
    //保存表单前打开元数据基本信息弹窗
    saveFormJson() {
      this.dialogVisible = true
      // let formJson = this.$refs.vfDesignerRef.getFormJson()
      // console.log(formJson)
      // let data = new FormData();
      // data.append("formJson", JSON.stringify(formJson))
      // axios.post(RESLIB_API_URL + CREATE_FORM, data).then(res => {
      //   console.log(res);
      //   this.$message.success(this.i18nt('designer.hint.sampleLoadedSuccess'))
      // }).catch(error => {
      //   this.$message.error(this.i18nt('designer.hint.sampleLoadedFail') + ':' + error)
      // })
      //TODO: 将formJson提交给后端保存接口，需自行实现！！
      //this.$message.success('表单已保存！')
    }
  }
}
</script>
<style lang="scss">
body {
  margin: 0;
}
</style>
